<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<div id="droptarget" style="width: 100px; height: 150px;background: red"></div>
<div id="output" style="width: 100px; height: 150px;background: blue"></div>

<body>
<script>
  let droptarget = document.getElementById("droptarget");
  function handleEvent(event) {
    let info = "",
            output = document.getElementById("output"),
            files, i, len;
    event.preventDefault();
    if (event.type == "drop") {
      files = event.dataTransfer.files;
      i = 0;
      len = files.length;
      while (i < len) {
        info += `${files[i].name} (${files[i].type}, ${files[i].size} bytes)<br>`;
        i++;
      }
      output.innerHTML = info;
    }
  }
  droptarget.addEventListener("dragenter", handleEvent);
  droptarget.addEventListener("dragover", handleEvent);
  droptarget.addEventListener("drop", handleEvent);
</script>
</body>
</html>